<template>
    <el-card class="box-card">
        <template v-if="ProductsType=='productsList'">
            <el-table :data="products" style="width: 100%">
                <el-table-column prop="id" label="ID" width="60px">
                </el-table-column>
                <el-table-column label="名称">
                    <template scope="scope">
                        <img class="min-poster" :src="scope.row.picUrl">
                        <span>{{scope.row.name}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="创建日期" width="220px">
                </el-table-column>
                <el-table-column width="90px">
                    <template scope="scope">
                        <el-button class="el-icon-edit" type="primary" size="mini" title="编辑商品" @click="handleEdit(scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-col :span="24" class="toolPage">
                <el-button type="primary" @click="addNewProduct">添加商品</el-button>
            </el-col>
        </template>
        <template v-else>
            <el-col :span="12">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="单位" prop="unit">
                        <el-input v-model="ruleForm.unit"></el-input>
                    </el-form-item>
                    <el-form-item label="每单位重量（公斤）" prop="weights">
                        <el-input type="number" v-model.number="ruleForm.weights"></el-input>
                    </el-form-item>
                    <el-form-item label="主图" prop="picList">
                        <el-upload action="//jsonplaceholder.typicode.com/posts/" :thumbnail-mode="true" type="drag" :on-preview="handlePreview"
                            :on-success="handSuccess">
                            <i class="el-icon-upload"></i>
                            <div class="el-dragger__text"><em>点击上传</em></div>
                            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>
                    </el-form-item>
                    <el-form-item label="内容" prop="contents">
                        <el-input type="textarea" :rows="5" v-model="ruleForm.contents"></el-input>
                    </el-form-item>
                    <el-form-item label="分类" prop="categories">
                        <el-select v-model="ruleForm.Option" clearable placeholder="请选择">
                            <el-option v-for="item in ruleForm.options" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="选项" class="PicCategories">
                        <el-select v-model="ruleForm.Options" multiple placeholder="请选择">
                            <el-option v-for="item in ruleForm.options" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-col>

            <el-col :span="24" class="toolPage">
                <el-button type="primary" @click="submitForm('ruleForm')">新增商品</el-button>
                <el-button style="float:right;" @click="goBack">返回</el-button>
            </el-col>
            <el-dialog title="预览" v-model="previewVisible">
                <img :src="previewImageUrl" v-if="previewVisible" style="width: 100%">
            </el-dialog>
        </template>
    </el-card>
</template>
<style scoped>
    .el-icon-upload {
        margin-top: 100px !important;
    }
    .btn {
        margin-top: 100px !important;
    }
    .el-dragger {
        width: 386px;
        height: 300px;
    }
    
    .PicCategories {
        margin-left: 12px;
    }
</style>
<script type="text/javascript">
    export default {
        data() {
            return {
                ProductsType: 'productsList',
                products: [{
                    id: '1',
                    picUrl: 'https://hxty-testing.huamengtong.com/uploads/product/poster/1/thumb_p.png',
                    name: '苹果',
                    date: '2016年9月12日 16:53'
                },
                {
                    id: '1',
                    picUrl: 'https://hxty-testing.huamengtong.com/uploads/product/poster/1/thumb_p.png',
                    name: '苹果',
                    date: '2016年9月12日 16:53'
                }],
                ruleForm: {
                    name: '',
                    unit: '',
                    weights: '',
                    contents: '',
                    Option: '',
                    Options: '',
                    options: [{
                        value: '选项1',
                        label: '黄金糕'
                    }, {
                        value: '选项2',
                        label: '双皮奶'
                    }, {
                        value: '选项3',
                        label: '蚵仔煎'
                    }, {
                        value: '选项4',
                        label: '龙须面'
                    }, {
                        value: '选项5',
                        label: '北京烤鸭'
                    }]
                },
                rules: {
                    name: [
                        { required: true, message: '请输入名称', trigger: 'blur' },
                    ],
                    unit: [
                        { required: true, message: '请输入单位', trigger: 'blur' }
                    ],
                    weights: [
                        { required: true, message: '请输入每单位重量(公斤)' }
                    ],
                    picList: [
                        { required: true, message: '请上传图片', trigger: 'blur' }
                    ],
                    categories: [
                        { required: true, message: '请选择分类', trigger: 'change' }
                    ],
                    contents: [
                        { required: true, message: '请输入内容', trigger: 'blur' }
                    ],
                },
                previewVisible: false,
                previewImageUrl: '',

            }
        },
        methods: {
            handleEdit: function (row) {
                this.$router.push(`/products/${row.id}/edit`)
            },
            handlePreview(file) {
                this.previewImageUrl = file.url;
                this.previewVisible = true;
            },
            handSuccess(response, file, fileList) {
                fileList.length = 0;
                fileList.push(file);
            },
            addNewProduct() {
                this.ProductsType = '';
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            goBack() {
                this.ProductsType = 'productsList';
            }
        }
    }

</script>